<template>
    <div class="login-card">
        <div class="login-img"></div>
        <div class="login-form-div">
            <span class="login-title">星云管理系统</span>
            <div class="login-form">
              <el-form :model="userInfo">
                <el-form-item>
                  <el-input v-model="userInfo.username">
                    <template #prefix>
                      <el-icon><User /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="userInfo.password" type="password" show-password>
                    <template #prefix>
                      <el-icon><Lock /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="userInfo.rememberMe" label="记住我" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="userLogin" style="width: 100%" :loading="loginLoading">登录</el-button>
                </el-form-item>
              </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import {login} from "@/api/login.js";
import {useRouter} from "vue-router";
import {getRouterData} from "@/api/sysMenu.js";
import Layout from "@/layout/index.vue";
import {getLoginState} from "@/api/login.js";
// import {Lock, User} from "@element-plus/icons-vue";
import {ElNotification} from "element-plus";
const userInfo = ref({
  username: 'admin',
  password: 'admin123',
  rememberMe:true
})

const router = useRouter();
const loginLoading = ref(false);

const userLogin = () =>{
  loginLoading.value = true
  login(userInfo.value).then((res) => {
    loginLoading.value = false
    if (res.code === 200) {
      getRouters()
    } else {
      ElNotification({
        title: '登录失败',
        message: res.msg,
        type: 'error',
      })
    }
  });
}

const getRouters = ()=> {
  getRouterData().then(res => {
    let resData = res.data
    resData.forEach(item => {
      router.addRoute({
        path: '/',
        component: Layout,
        hidden: true,
        children: [
          {
            path: item.routerPath,
            component: () => import(/* @vite-ignore */ `../views${item.compPath}`)
          }
        ]
      })
    });
    sessionStorage.setItem('routes', JSON.stringify(resData));
    router.push('/index')
  })
}


const skipLogin = () => {
  getLoginState().then(res=>{
    if (res.data){
      router.push('/index')
    }
  })
}
onMounted(()=>{
  skipLogin()
})
</script>

<style>
.login-card {
    margin: 20vh auto;
    width: 50vw; /* 可以根据需要进行调整 */
    height: 60vh;
    border-radius: 30px;
    overflow: hidden; /* 确保内容不会溢出 */
    display: flex;
    box-shadow: 0 0 90px #8c8b8b;
}

.login-img {
    height: 60vh;
    float: left;
    width: 35%;
    background-image: url("@/assets/img/nebula.jpg");
    background-size: cover
}

.login-form-div {
    text-align: center;
    width: 65%;
    padding-top: 50px;
}

.login-title {
    margin-top: 30px;
    font-size: x-large;
}

.login-form {
    width: 60%;
    margin: 70px auto;
}
</style>
